<template>
  <div>
    <section class="donate" v-if="!isDonate" @click="onDonate">
      捐赠专注豆
    </section>
    <section class="donate-info" v-if="isDonate">
      <div class="donate-info_list flex">
        <div class="donate-info_item"
          v-for='(item, idx) in donateNums' @click='donate(item)' :key="idx">
          <div>{{item.value}}</div>
        </div>
      </div>
      <div class="donate-info_desc">我的专注豆数：{{allCount || '--'}}</div>
      <div class="donate-info_desc">捐赠专注豆数：{{donateCount || '--'}}</div>
      <div :class="['donate-button', !selectedButton ? 'gray-button' : '']" @click='onDonateComplete'>捐赠专注豆</div>
    </section>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
import request from '../../utils/request'
import { countForShow } from '../../utils'

export default {
  props: {
    allCount: Number,
    donateUpLimit: Number,
  },
  data() {
    return {
      isDonate: false,
      donateSelectedNum: null,
      restCount: 0,
      donateCount: 0,
      donateNums: [
        {
          key: '1',
          value: '1'
        },
        {
          key: '10',
          value: '10'
        },
        {
          key: '100',
          value: '100'
        },
        {
          key: 'all',
          value: '全部'
        },
        {
          key: 'clear',
          value: '清除'
        }
      ],
    }
  },
  watch: {
    allCount(val) {
      if (this.donateSelectedNum === 'all') {
        this.restCount = 0
      } else {
        this.restCount = this.donateSelectedNum ? val - this.donateSelectedNum * 1 : val
      }
    }
  },
  computed: {
    selectedButton() {
      return this.donateCount > 0
    },
    medel() {
      let medel = ''
      if (this.donateCount >= 1 && this.donateCount < 100) {
        medel = 'icon_2'
      } else if (this.donateCount >= 100 && this.donateCount < 500) {
        medel = 'icon_3'
      } else {
        medel = 'icon_1'
      }
      return medel
    }
  },
  methods: {
    onDonate() {
      this.isDonate = true
    },
    donate(item) {
      if (item.key !== 'clear') {
        this.donateSelectedNum = item.key
        if (this.donateSelectedNum === 'all') {
          this.donateCount = this.allCount
          this.restCount = 0
        } else if (this.restCount >= this.donateSelectedNum * 1) {
          this.donateCount += this.donateSelectedNum * 1
          this.restCount -= this.donateSelectedNum * 1
        } else {
          Toast('没有那么多专注豆，快去专注赚取专注豆吧~')
        }
      } else {
        this.donateSelectedNum = null
        this.donateCount = 0
        this.restCount = this.allCount
      }
    },
    donateOK() {
      if (this.donateUpLimit > 0 && this.donateCount > this.donateUpLimit) {
        const message = {
          title: '已达到捐赠上限',
          content: `很遗憾，由于我们的预算限制，不得已设置了${countForShow(this.donateUpLimit)}个专注豆的捐赠上限`,
          contentType: 'text',
          okText: '知道了',
          okCallback: 'donateCancel',
        }
        enddelay_dialog.postMessage(JSON.stringify(message))
      } else if (this.donateCount > this.allCount) {
        const message = {
          title: '专注豆不足',
          content: '很遗憾，由于专注豆数量不够，无法捐赠，请重新选择！',
          contentType: 'text',
          okText: '知道了',
          okCallback: 'donateCancel',
        }
        enddelay_dialog.postMessage(JSON.stringify(message))
      } else {
        request('/delay/api/welfare/donate', 'POST', {
          amount: this.donateCount,
        }).then(res => {
          if (res.state === 0) {
            this.donateSelectedNum = null
            this.allCount = this.allCount - this.donateCount
            const message = {
              title: '感谢你的付出',
              subTitle: `小拖把小学的捐赠进度被你
    提升了一大截呢！`,
              content: this.medel,
              contentType: 'image',
              okText: '收下',
              okCallback: 'donateCancel',
            }
            enddelay_dialog.postMessage(JSON.stringify(message))
            this.donateCount = 0
            this.$emit('refresh')
          }
        })
      }
    },
    donateCancel() {
      console.log('cancel')
    },
    onDonateComplete() {
      if (this.donateCount > 0) {
        const message = {
          title: `确认捐赠${this.donateCount}个专注豆?`,
          subTitle: '你将获得：',
          content: this.medel,
          contentType: 'image',
          okText: '确认捐赠',
          cancelText: '再想想',
          okCallback: 'donateOK',
          cancelCallback: 'donateCancel'
        }
        enddelay_dialog.postMessage(JSON.stringify(message))
      }
    },
  },
  mounted() {
    this.restCount = 1 * this.allCount ? 1 * this.allCount : 0
    window.donateOK = (...args) => this.donateOK(args)
    window.donateCancel = (...args) => this.donateCancel(args)
  }
}
</script>

<style lang="less">
.mint-toast .mint-toast-text {
  font-size: 20px!important;
}
</style>

<style lang="less" scoped>
.donate {
  background: #fff;
  font-family: PingFangSC-Medium;
  font-size: 24px;
  color: #F56D7B;
  text-align: center;
  padding: 21px 0 0;
}
.donate:after{
  content: '';
  width: 25px;
  height: 25px;
  background: url(~@/assets/images/down_pink.png);
  display: block;
  margin: 16px auto 0;
  background-size: 100%;
}
.donate-info {
  background: #fff;
  padding-top: 10px;
}
.donate-info_list {
  padding: 30px 36px;
}
.donate-info_item {
  background: #F5F5F5;
  color: #727E89;
  font-family: PingFangSC-Regular;
  font-size: 18px;
  text-align: center;
  flex: 1;
  margin: 0 4px;
  border-radius: 24px;
  border-radius: 24px;
  width: 81px;
  height: 48px;
  line-height: 48px;
}
.donate_selected {
  background: #F56D7B;
  color: #fff;
}
.donate-info_desc {
  text-align: center;
  margin: 0 0 18px;
  color: #727E89;
  font-family: PingFangSC-Regular;
  font-size: 21px;
}
.donate-button {
  margin: 0 auto;
  background: #F56D7B;
  border-radius: 36px;
  border-radius: 36px;
  width: 320px;
  height: 72px;
  line-height: 72px;
  font-family: PingFangSC-Regular;
  font-size: 21px;
  color: #FFFFFF;
  text-align: center;
  &.gray-button {
    background: #f5f5f5;
  }
}
</style>